<%--
  Created by IntelliJ IDEA.
  User: 15941
  Date: 2020/2/16
  Time: 15:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta charset="utf-8" lang="zh">
    <title>酒店住户信息管理系统</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <%--引入bootstrap--%>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="/js/westeros.js"></script>


</head>
<body>

<%--导航栏--%>
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation" style="margin:0px">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">信息管理</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a href="/udo/query">用户信息</a></li>
                <li><a href="/udo/roomsquery">用房查询</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        行为相关<b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="/ado/query">地点设置</a></li>
                        <li><a href="#">嘻嘻</a></li>
                        <li><a href="#">嘻嘻嘻</a></li>
                        <li class="divider"></li>
                        <li><a href="#">嘻嘻嘻嘻</a></li>
                        <li class="divider"></li>
                        <li><a href="#">嘻嘻嘻嘻嘻</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登陆/注册</a></li>
            </ul>

        </div>

    </div>
</nav>


<%--轮播--%>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img class="first-slide" src="images/1.jpg" alt="First slide" style="width:auto;height:500px;margin:auto;">
            <div class="container">
                <div class="carousel-caption">
                    <h1>U1S1团队超牛逼酒店管理系统</h1>
                    <p> lalallalallalallallallalal</p>
                    <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img class="second-slide" src="images/2.jpg" alt="Second slide" style="width:auto;height:500px;margin:auto;">
            <div class="container">
                <div class="carousel-caption">
                    <h1>意想不到的体检</h1>
                    <p>niu bu niu bi i don't know， but wo think it is a little low</p>
                    <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img class="third-slide" src="images/3.jpg" alt="Third slide" style="width:auto;height:500px;margin:auto;">
            <div class="container">
                <div class="carousel-caption">
                    <h1>快来使用吧</h1>
                    <p>bu yao lai yong la</p>
                    <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
                </div>
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div><!-- /.carousel -->

<br><br><br>
<%--总体数据呈现--%>

<div style="text-align:center">

    <div id="id1" style="width: 600px;height:400px; display: inline-block;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('id1'), 'westeros');

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '一周价格',
                left: 'center'
            },
            tooltip: {},
            legend: {
                data: ['价位']
            },
            xAxis: {
                data: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
            },
            yAxis: {},
            series: [{
                name: '星期',
                type: 'bar',
                data: [400, 60, 60, 60, 60, 60, 400]
            }],
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

    <div id="id2" style="width: 600px;height:400px; display:inline-block; "></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('id2'), 'westeros');

        myChart.setOption({
            title: {
                text: "房间占比",
                left: 'center'
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',    // 设置图表类型为饼图
                    radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                    data: [          // 数据数组，name 为数据项名称，value 为数据项值
                        {value: 235, name: '已预定'},
                        {value: 274, name: '空房'},
                    ]
                }
            ],
        })
    </script>

</div>

<br><br><br><br>




</body>
</html>
